<template>
  <div style="border: 1px solid #e6e6e6; background: #ffffff" class="cls">
    <div class="title">推荐按钮样式</div>
    <div class="arr">
      <div
        v-for="(item1, index_) in arrButtonCls"
        :key="index_"
        style="display: flex; justify-content: space-between; margin-bottom: 20px"
      >
        <div
          v-for="(item, index) in item1"
          :key="index"
          class="span"
          :style="`background:${item.bgColor};border:1px solid ${item.bdColor};color:${item.color}`"
          @click="handleChange(item)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div
      class="title"
      style="
        display: flex;
        justify-content: space-between;
        padding-right: 20px;
        border-bottom: 1px solid #e6e6e6;
      "
      ><div>按钮样式详情</div><div style="cursor: pointer" @click="empty">一键清空</div>
    </div>
    <div class="button-detail">
      <je-form
        :model="formState"
        label-align="right"
        layout="inline"
        :colon="false"
        autocomplete="off"
      >
        <je-form-item label="背景色">
          <je-color
            v-model:value="formState.RESOURCEBUTTON_BGCOLOR"
            style="width: 130px"
          ></je-color>
        </je-form-item>

        <je-form-item label="文字色">
          <je-color
            v-model:value="formState.RESOURCEBUTTON_FONTCOLOR"
            style="width: 130px"
          ></je-color>
        </je-form-item>
        <je-form-item label="边框色">
          <je-color
            v-model:value="formState.RESOURCEBUTTON_BORDERCOLOR"
            style="width: 130px"
          ></je-color>
        </je-form-item>
      </je-form>
      <div class="remark" style="margin-top: 20px">
        备注：<br />
        1.选择推荐样式将自动赋值，您也可以手动调整色值。若您使用主题色按钮样式，将会清空色值，按钮会随系统主题配色展示。<br />
        2.Action列按钮仅支持文字色样式。
      </div>
    </div>
  </div>
</template>

<script>
  const arrButtonCls = [
    [
      {
        value: 'JECloud_B_H0',
        label: '主题色按钮',
        bgColor: '#3265F5',
        color: '#FFFFFF',
        bdColor: '#3265F5',
      },
      {
        value: 'JECloud_B_H01',
        label: 'JECloud_B_H01',
        bgColor: '#3265F5',
        bdColor: '#3265F5',
        color: '#FFFFFF',
      },
      {
        value: 'JECloud_B_H02',
        label: 'JECloud_B_H02',
        bgColor: '#F3752D',
        bdColor: '#F3752D',
        color: '#FFFFFF',
      },
      {
        value: 'JECloud_B_H03',
        label: 'JECloud_B_H03',
        bgColor: '#E34F47',
        bdColor: '#E34F47',
        color: '#FFFFFF',
      },
    ],
    [
      {
        value: 'JECloud_B_H04',
        label: 'JECloud_B_H04',
        bgColor: '#02A863',
        bdColor: '#02A863',
        color: '#FFFFFF',
      },
      {
        value: 'JECloud_B_H05',
        label: 'JECloud_B_H05',
        bgColor: '#3F3F3F',
        bdColor: '#3F3F3F',
        color: '#FFFFFF',
      },
      {
        value: 'JECloud_B_H06',
        label: 'JECloud_B_H06',
        bgColor: '#FFFFFF',
        bdColor: '#D9D9D9',
        color: '#3F3F3F',
      },
      {
        value: 'JECloud_B_H07',
        label: 'JECloud_B_H07',
        bgColor: '#FFFFFF',
        color: '#3F3F3F',
        bdColor: '#FFFFFF',
      },
    ],
    [
      {
        value: 'JECloud_B_H08',
        label: 'JECloud_B_H08',
        bgColor: '#F1F1F1',
        bdColor: '#D9D9D9',
        color: '#3F3F3F',
      },
      {
        value: 'JECloud_B_H09',
        label: 'JECloud_B_H09',
        bgColor: '#F1F1F1',
        bdColor: '#F1F1F1',
        color: '#3F3F3F',
      },
      {
        value: 'JECloud_B_H10',
        label: 'JECloud_B_H10',
        bgColor: '#F7C74E',
        bdColor: '#F7C74E',
        color: '#FFFFFF',
      },
      {
        value: 'JECloud_B_H11',
        label: 'JECloud_B_H11',
        bgColor: '#cf7dda',
        bdColor: '#cf7dda',
        color: '#FFFFFF',
      },
    ],
  ];

  import { toRefs, reactive, defineComponent } from 'vue';
  // import { Modal } from '@jecloud/ui';

  export default defineComponent({
    name: 'Cls',
    components: {
      // JeModal: Modal,
    },
    props: {
      selectData: {
        type: Object,
        default: () => {},
      },
    },
    emits: [],
    setup(props) {
      const state = reactive({
        title: '按钮样式',
        arrButtonCls,
        formState: {
          RESOURCEBUTTON_BGCOLOR: props.selectData.RESOURCEBUTTON_BGCOLOR || '',
          RESOURCEBUTTON_FONTCOLOR: props.selectData.RESOURCEBUTTON_FONTCOLOR || '',
          RESOURCEBUTTON_BORDERCOLOR: props.selectData.RESOURCEBUTTON_BORDERCOLOR || '',
        },
      });

      const methods = {
        empty() {
          state.formState.RESOURCEBUTTON_BGCOLOR = '';
          state.formState.RESOURCEBUTTON_FONTCOLOR = '';
          state.formState.RESOURCEBUTTON_BORDERCOLOR = '';
        },
        handleChange(item) {
          console.log('item', item);
          if (item.value == 'JECloud_B_H0') {
            methods.empty();
            return false;
          }
          state.formState.RESOURCEBUTTON_BGCOLOR = item.bgColor;
          state.formState.RESOURCEBUTTON_FONTCOLOR = item.color;
          state.formState.RESOURCEBUTTON_BORDERCOLOR = item.bdColor;
        },
      };

      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style lang="less" scoped>
  .cls {
    .title {
      height: 32px;
      line-height: 32px;
      background: #f7f9fc;
      padding-left: 20px;
      // border: 1px solid #e6e6e6;
      border-radius: 0px;
    }
    .arr {
      padding: 16px 22px 0;
      border-top: 1px solid #e6e6e6;
      border-bottom: 1px solid #e6e6e6;
      .span {
        padding: 6px 12px;
        border-radius: 4px;
        width: 22%;
        color: #ffffff;
        text-align: center;
      }
    }
    .button-detail {
      padding: 20px;
      .remark {
        width: 100%;
        background: #faf9da;
        border: 1px solid #b8741a;
        padding: 3px 15px;
        font-size: 14px;
        line-height: 22px;
        color: #b8741a;
        border-radius: 2px;
        text-align: justify;
      }
    }
  }
</style>
